<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			/* 400-500之间是默认的 */
			div{
				width: 100px;
				height: 100px;
				background: red;
			}

			/* 屏幕尺寸大于500的时候满足 */
			@media (min-width:500px){
				div{
					background: green;
				}
			}

			/* 屏幕尺寸小于400的时候满足 */
			@media (max-width:400px){
				div{
					background: blue;
				}
			}

			/* 横屏的时候满足 */
			@media (orientation:landscape){
				div{
					width: 400px;
					height: 100px;
				}
			}

			/* 竖屏的时候满足 */
			@media (orientation:portrait){
				div{
					width: 100px;
					height: 400px;
				}
			}

			/* 宽高比为4：3的时候满足，800*600的时候是4：3 */
			@media (aspect-ratio:4/3){
				div{
					border: 10px solid #000;
				}
			}

			/* 当像素比为2的时候，满足 */
			@media (-webkit-device-pixel-ratio:2){
				div:after{
					content: '陈学辉';
					font-size: 50px;
				}
			}
		</style>
	</head>
	<body>
		<!-- 
			媒体特性
				width	宽度
					min-width	最小宽度，宽度只能比这个大
					max-width	最大的宽度，宽度只能比这个小
				height	高度
					min-width	最小高度，高度只能比这个大
					max-width	最大的高度，高度只能比这个小
				orientation		方向
					landscape	横屏（宽度大于高度）
					portrait	竖屏（高度大于宽度）
				aspect-ratio	宽度比
				-webkit-device-pixel-ratio	像素比（webkit内核的私有属性）
		 -->
		<div>媒体特性</div>
	</body>
</html>

